<template>
  <div class="orgTree">

    <div v-for="(item,index) in orgData" :key="item.id">
    
      <div class="L-tree-item">
        
        <div class="tree-checkbox" v-if="bo==='dep'">
          <van-checkbox :name="item" :shape="mode==='multi' ? 'square' : 'round'" icon-size="16px" v-model="item.extra.checked" @click="(e)=>{checkboxChange(item,e)}" checked-color="#165dff"></van-checkbox>
        </div>
        <div class="tree-checkbox" v-else>
          <van-checkbox :name="item" v-if="item.type=='emp'" :shape="mode==='multi' ? 'square' : 'round'" icon-size="16px" v-model="item.extra.checked" @click="(e)=>{checkboxChange(item,e)}" checked-color="#165dff"></van-checkbox>
        </div>
        <div class="tree-body">
          <van-row type="flex" align="center" :style="{'padding-left':listMode==='tree' ? ((item.weight-1)*10)+'px' :'5px'}">
            <van-col :span="4">
              <div class="L-tree-icon-block" :class="  listMode==='tree' ? 'L-level'+item.weight+'-color' : 'L-level'+((index+1)%5)+'-color'">
                <i v-if="item.type==='dep'" class="iconfont icon-zuzhiguanli" style="font-size:20px"></i>
                <i v-else class="iconfont icon-renyuan1" style="font-size:18px"></i>
                <!-- <b v-else>{{item?.extra?.sname.slice(0,1)}}</b> -->
              </div>
            </van-col>
            <van-col :span="18">
              <div :style="{'padding-left':listMode==='tree' ? ((item.weight-1)*5)+'px' :'5px'}">
                <div class="L-big-text L-nowrap-row">{{item?.extra?.sname}}</div>
                <div class="L-text L-regular-text-color L-nowrap-row">{{item?.extra?.iddep_ref}}</div>
              </div>
            </van-col>
            <van-col :span="2">
              <span v-if="item.type==='dep' ">
                <i v-show="!item?.extra?.show" @click="handleExpand(item,true)" class="iconfont icon-xiayibu2"></i>
                <i v-show="item?.extra?.show" @click="handleExpand(item,false)" class="iconfont icon-zhankai1"></i>
              </span>
            </van-col>
          </van-row>
        </div>
      </div>

      <RefOrgTree :selecteddata="selecteddata" :bo="bo" :mode="mode" v-show="item?.extra?.show" v-if="item.children && item.children.length >0 && listMode==='tree'" :orgData="item.children" :handleExpand="handleExpand" :handleChecked="handleChecked" />
    </div>
  </div>

</template>

<script setup name="RefOrgTree">
import { defineProps } from 'vue'





const props = defineProps({
  listMode: {
    type: String,
    default: 'tree',
  },
  selecteddata: {
    type: Array,
    default: []
  },
  mode: {
    type: String,
    default: 'normal'
  },
  bo: {
    type: String,
    default: ''
  },
  orgData: {
    type: Array,
    default: []
  },
  handleExpand: {
    type: Function,
    default: () => { }
  },
  handleChecked: {
    type: Function,
    default: () => { }
  }

})





function checkboxChange(item, isChecked) {
  props.handleChecked(item, isChecked)
}
    // handleExpand(item,isExpand) {
    //   this.$emit('handleExpand',item,isExpand)
    // }


</script>

<style>
.L-tree-item {
  box-sizing: border-box;
  margin: 15px auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* padding */
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
}

.L-tree-item .tree-checkbox {
  padding-left: 5px;
  box-sizing: border-box;
  width: 30px;
  flex-shrink: 0;
  flex-grow: 0;
}
.L-tree-item .tree-body {
  flex-shrink: 1;
  flex-grow: 1;
}

.L-tree-icon-block {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ccdbfa;
  color: #165dff;
  border-radius: 6px;
  font-size: 16px;
  margin-left: 3px;
  /* border: 1px solid #a4bcf2; */
  /* font-weight: bold; */
}

/* .L-level1-color{
  color: #104db4;
  background: #e4f3fa;
}

.L-level2-color{
  color: #0f5fe5;
  background: #e4f3fa;
}


.L-level3-color{
  color: #1378ed;
  background: #e4f3fa;
}
.L-level4-color{
  color: #2497f1;
  background: #e4f3fa;
}
.L-level5-color{
  color: #43b8f0;
  background: #e4f3fa;
}

.L-level6-color{
  color: #76d0f1;
  background: #e4f3fa;
} */

/* .L-level1-color{
  color: #548bc5;
  background: #b3ddf0;
}

.L-level2-color{
  color: #038ed3;
  background: #adddf1;
}


.L-level3-color{
  color: #0099cd;
  background: #8cd3e5;
}
.L-level4-color{
  color: #0099bf;
  background: #85cee1;
}
.L-level5-color{
  color: #069ab3;
  background: #cae9ed;
}

.L-level6-color{
  color: #06887f;
  background: #acd9e2;
}

.L-level7-color{
  color: #059da1;
  background: #91d1d8;
} */

/* .L-level1-color {
  color: #165dff;
  background: #ccdbfa;
}

.L-level2-color {
  color: #0f5fe5;
  background: #e4f3fa;
}

.L-level7-color {
  color: #67c23a;
  background: #f0faec;
}

.L-level6-color {
  color: #8a370c;
  background: #f2d0b8;
}
.L-level3-color {
  color: #6d540c;
  background: #f7eacc;
}
.L-level4-color {
  color: #4b4569;
  background: #d7d4e9;
}
.L-level5-color {
  color: #49503b;
  background: #dbe1d3;
} */

/* .L-level1-color {
  color: #fff;
  background: #207ced;
}

.L-level2-color {
  color: #fff;
  background: #4bbaf1;
}


.L-level3-color {
  color: #fff;
  background: #7984d8;
}
.L-level4-color {
  color: #fff;
  background: #d8c549;
}
.L-level5-color {
  color: #fff;
  background: #f25733;
}

.L-level6-color {
  color: #fff;
  background: #e6a5bf;
}

.L-level7-color {
  color: #fff;
  background: #81af74;
} */

/* .L-level1-color {
  color: #fff;
  background: #207ced;
}

.L-level2-color {
  color: #fff;
  background: #2dccf6;
}

.L-level3-color {
  color: #fff;
  background: #9c3dc6;
}
.L-level4-color {
  color: #fff;
  background: #e76b1f;
}
.L-level5-color {
  color: #fff;
  background: #742c95;
}

.L-level6-color {
  color: #fff;
  background: #ef3dbc;
}

.L-level7-color {
  color: #fff;
  background: #8cd03c;
} */

.L-level1-color {
  color: #fff;
  background: #217bfb;
}

.L-level2-color {
  color: #fff;
  background: #2dccf6;
}

.L-level3-color {
  color: #fff;
  background: #907af5;
}
.L-level4-color {
  color: #fff;
  background: #fcb95d;
}
.L-level5-color {
  color: #fff;
  background: #47d4bb;
}

.L-level6-color {
  color: #fff;
  background: #f46566;
}

.L-level7-color {
  color: #fff;
  background: #8cd03c;
}
</style>